<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>子组件在接受父组件值的时候，校验值的类型，比如数据类型、是否必填、默认值等</p>
        <p>适用场景： 子组件是公用组件的时候，有错误及时暴露，避免上线后出问题</p>
        <son1 
            :info1="val1"
            :info2="val2"
            info3="val3"
            :info4="gj"
            :info5="val5"
        ></son1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                val1: '110',
                val2: '10086',
                val3: 'hello',
                gj: 'usa',
                val5: [1,2,3,4,5]
            },
            methods: {
                
            },
            components: {
                'son1': {
                    template: '<div>{{info1}}-{{info2}}-{{info3}}-{{info4}}-{{info5}}</div>',
                    props: {
                        // 校验类型
                        info1: {
                            type: String
                        },
                        info2: [Number, String],
                        // 校验必填
                        info3: {
                            required: true
                        },
                        // 默认值
                        info4: {
                            default: '中国'
                        },
                        info5: {
                            validator(val) {
                                // 这一项需要是一个数组 且下标为4的那一项的值要大于6
                                // 函数名是固定的validator（校验器）
                                // 参数是父组件传来的值
                                // return 后面写校验规则
                                return val[4] > 6
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>